<template>
	<div class="count-users">
		<div class="card">
			<div class="card__header">
				<span class="label">总用户数</span>
				<span class="value">{{ totalUsers }}</span>
			</div>

			<div class="card__container">
				<vue-echarts :options="chartOptions"></vue-echarts>
			</div>

			<div class="card__footer">
				<span class="label">日新增数</span>
				<span class="value">{{ totalTodayNewUsers }}</span>
			</div>
		</div>
	</div>
</template>

<script>
import VueEcharts from "vue-echarts";
import echarts from "echarts";

export default {
	components: {
		VueEcharts
	},

	created() {
		this.showTotalUsers();
		this.showTotalTodayNewUsers();
		this.showTotalDailyNewUsers();
	},

	data() {
		return {
			totalUsers: 0,
			totalTodayNewUsers: 0,
			chartOptions: {
				grid: {
					left: 0,
					top: 1,
					right: 0,
					bottom: 0
				},
				xAxis: {
					type: "category",
					data: [],
					boundaryGap: false
				},
				yAxis: {
					type: "value",
					splitLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLine: {
						show: false
					},
					axisLabel: {
						show: false
					}
				},
				series: [
					{
						name: "总访问量",
						type: "line",
						smooth: true,
						showSymbol: false,
						symbol: "circle",
						symbolSize: 6,
						data: [],
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[
										{
											offset: 0,
											color: "#D1E5FF"
										},
										{
											offset: 1,
											color: "#FFFFFF"
										}
									],
									false
								)
							}
						},
						itemStyle: {
							normal: {
								color: "#4165d7"
							}
						},
						lineStyle: {
							normal: {
								width: 2
							}
						}
					}
				]
			}
		};
	},

	methods: {
		showTotalUsers() {
			this.$service.common.userTotal().then((res) => {
				this.totalUsers = res;
			});
		},

		showTotalTodayNewUsers() {
			this.$service.common.todayNewUser().then((res) => {
				this.totalTodayNewUsers = res;
			});
		},

		showTotalDailyNewUsers() {
			this.$service.common.dailyNewUser().then((res) => {
				this.chartOptions.xAxis.data = res.dates;
				this.chartOptions.series[0].data = res.datas;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import "./common.scss";
.count-users {
	.card {
		.echarts {
			height: 50px;
			width: 100%;
		}

		&__container {
			padding: 0;
		}

		&__footer {
			border-top: 0;
		}
	}
}
</style>
